<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科目管理测试页面</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #007bff;
        }
        .header h1 {
            color: #007bff;
            margin-bottom: 10px;
        }
        .api-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .api-section h3 {
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .btn {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }
        .btn-primary { background: #007bff; color: white; }
        .btn-success { background: #28a745; color: white; }
        .btn-info { background: #17a2b8; color: white; }
        .btn-warning { background: #ffc107; color: black; }
        .btn-danger { background: #dc3545; color: white; }
        .btn:hover { opacity: 0.8; }
        .result {
            margin-top: 15px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 4px;
            border-left: 4px solid #007bff;
            white-space: pre-wrap;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            max-height: 300px;
            overflow-y: auto;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input, .form-group select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .form-inline {
            display: flex;
            gap: 10px;
            align-items: end;
        }
        .form-inline .form-group {
            flex: 1;
            margin-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>科目管理API测试页面</h1>
            <p>测试后端科目管理相关接口功能</p>
        </div>

        <!-- 获取科目列表 -->
        <div class="api-section">
            <h3>1. 获取科目列表（分页）</h3>
            <div class="form-inline">
                <div class="form-group">
                    <label>页码:</label>
                    <input type="number" id="listPage" value="1" min="1">
                </div>
                <div class="form-group">
                    <label>每页数量:</label>
                    <input type="number" id="listSize" value="10" min="1" max="100">
                </div>
                <div class="form-group">
                    <label>科目名称:</label>
                    <input type="text" id="listName" placeholder="可选">
                </div>
                <div class="form-group">
                    <label>年级层次:</label>
                    <select id="listGrade">
                        <option value="">全部</option>
                        <option value="1">小学</option>
                        <option value="2">初中</option>
                        <option value="3">高中</option>
                    </select>
                </div>
                <div class="form-group">
                    <button class="btn btn-primary" onclick="getSubjectList()">查询</button>
                </div>
            </div>
            <div id="listResult" class="result" style="display: none;"></div>
        </div>

        <!-- 获取所有科目 -->
        <div class="api-section">
            <h3>2. 获取所有科目（不分页）</h3>
            <button class="btn btn-info" onclick="getAllSubjects()">获取所有科目</button>
            <div id="allResult" class="result" style="display: none;"></div>
        </div>

        <!-- 新增科目 -->
        <div class="api-section">
            <h3>3. 新增科目</h3>
            <div class="form-inline">
                <div class="form-group">
                    <label>科目名称:</label>
                    <input type="text" id="addName" placeholder="必填">
                </div>
                <div class="form-group">
                    <label>年级层次:</label>
                    <select id="addGrade">
                        <option value="">请选择</option>
                        <option value="1">小学</option>
                        <option value="2">初中</option>
                        <option value="3">高中</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>图标路径:</label>
                    <input type="text" id="addIcon" placeholder="可选">
                </div>
                <div class="form-group">
                    <label>排序号:</label>
                    <input type="number" id="addSort" value="0" min="0">
                </div>
                <div class="form-group">
                    <button class="btn btn-success" onclick="addSubject()">新增</button>
                </div>
            </div>
            <div id="addResult" class="result" style="display: none;"></div>
        </div>

        <!-- 根据ID查询科目 -->
        <div class="api-section">
            <h3>4. 根据ID查询科目</h3>
            <div class="form-inline">
                <div class="form-group">
                    <label>科目ID:</label>
                    <input type="number" id="getById" placeholder="输入科目ID" min="1">
                </div>
                <div class="form-group">
                    <button class="btn btn-info" onclick="getSubjectById()">查询</button>
                </div>
            </div>
            <div id="getByIdResult" class="result" style="display: none;"></div>
        </div>

        <!-- 根据年级查询科目 -->
        <div class="api-section">
            <h3>5. 根据年级查询科目</h3>
            <div class="form-inline">
                <div class="form-group">
                    <label>年级层次:</label>
                    <select id="gradeLevel">
                        <option value="">请选择</option>
                        <option value="1">小学</option>
                        <option value="2">初中</option>
                        <option value="3">高中</option>
                    </select>
                </div>
                <div class="form-group">
                    <button class="btn btn-info" onclick="getSubjectsByGrade()">查询</button>
                </div>
            </div>
            <div id="gradeResult" class="result" style="display: none;"></div>
        </div>

        <!-- 更新科目状态 -->
        <div class="api-section">
            <h3>6. 更新科目状态</h3>
            <div class="form-inline">
                <div class="form-group">
                    <label>科目ID:</label>
                    <input type="number" id="statusId" placeholder="输入科目ID" min="1">
                </div>
                <div class="form-group">
                    <label>状态:</label>
                    <select id="statusValue">
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
                <div class="form-group">
                    <button class="btn btn-warning" onclick="updateStatus()">更新状态</button>
                </div>
            </div>
            <div id="statusResult" class="result" style="display: none;"></div>
        </div>

        <!-- 删除科目 -->
        <div class="api-section">
            <h3>7. 删除科目</h3>
            <div class="form-inline">
                <div class="form-group">
                    <label>科目ID:</label>
                    <input type="number" id="deleteId" placeholder="输入科目ID" min="1">
                </div>
                <div class="form-group">
                    <button class="btn btn-danger" onclick="deleteSubject()">删除</button>
                </div>
            </div>
            <div id="deleteResult" class="result" style="display: none;"></div>
        </div>

        <!-- 上传科目图标 -->
        <div class="api-section">
            <h3>8. 上传科目图标</h3>
            <div class="form-inline">
                <div class="form-group">
                    <label>选择图片文件:</label>
                    <input type="file" id="iconFile" accept="image/*">
                </div>
                <div class="form-group">
                    <button class="btn btn-success" onclick="uploadIcon()">上传图标</button>
                </div>
            </div>
            <div id="uploadResult" class="result" style="display: none;"></div>
        </div>

        <!-- 批量删除科目 -->
        <div class="api-section">
            <h3>9. 批量删除科目</h3>
            <div class="form-inline">
                <div class="form-group">
                    <label>科目ID列表（逗号分隔）:</label>
                    <input type="text" id="batchIds" placeholder="例如：1,2,3">
                </div>
                <div class="form-group">
                    <button class="btn btn-danger" onclick="batchDeleteSubjects()">批量删除</button>
                </div>
            </div>
            <div id="batchDeleteResult" class="result" style="display: none;"></div>
        </div>

        <!-- 功能测试总结 -->
        <div class="api-section">
            <h3>10. 功能测试总结</h3>
            <div style="background: #f8f9fa; padding: 15px; border-radius: 5px;">
                <h4>已实现的功能：</h4>
                <ul style="margin: 10px 0; padding-left: 20px;">
                    <li>✅ 分页查询科目列表（支持搜索筛选）</li>
                    <li>✅ 获取所有科目列表（不分页）</li>
                    <li>✅ 根据ID查询科目详情</li>
                    <li>✅ 根据年级层次查询科目</li>
                    <li>✅ 新增科目（含图片上传）</li>
                    <li>✅ 更新科目（含图片上传）</li>
                    <li>✅ 删除单个科目</li>
                    <li>✅ 批量删除科目</li>
                    <li>✅ 更新科目状态</li>
                    <li>✅ 科目图标上传到MinIO</li>
                </ul>
                <h4>前端新增功能：</h4>
                <ul style="margin: 10px 0; padding-left: 20px;">
                    <li>✅ 批量选择和批量删除</li>
                    <li>✅ 快速筛选标签（按年级）</li>
                    <li>✅ 科目统计信息展示</li>
                    <li>✅ 科目详情查看对话框</li>
                    <li>✅ 导出科目数据为CSV</li>
                    <li>✅ 图片上传和预览</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8082';

        // 显示结果
        function showResult(elementId, data, isError = false) {
            const element = document.getElementById(elementId);
            element.style.display = 'block';
            element.style.borderLeftColor = isError ? '#dc3545' : '#007bff';
            element.style.backgroundColor = isError ? '#f8d7da' : '#f8f9fa';
            element.textContent = JSON.stringify(data, null, 2);
        }

        // 1. 获取科目列表
        async function getSubjectList() {
            try {
                const params = {
                    page: parseInt(document.getElementById('listPage').value) || 1,
                    size: parseInt(document.getElementById('listSize').value) || 10
                };

                const name = document.getElementById('listName').value.trim();
                if (name) params.name = name;

                const grade = document.getElementById('listGrade').value;
                if (grade) params.gradeLevel = parseInt(grade);

                const response = await fetch(`${API_BASE}/subject/list`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(params)
                });

                const data = await response.json();
                showResult('listResult', data);

                // 如果有数据，显示分页信息
                if (data.code === 200 && data.data) {
                    const pageInfo = `
                    <div style="margin-top: 10px; padding: 10px; background: #e3f2fd; border-radius: 4px;">
                        <strong>分页信息：</strong><br>
                        当前页：${data.data.current} / 总页数：${data.data.pages}<br>
                        每页大小：${data.data.size} / 总记录数：${data.data.total}<br>
                        是否有下一页：${data.data.hasNext ? '是' : '否'} / 是否有上一页：${data.data.hasPrevious ? '是' : '否'}
                    </div>`;
                    document.getElementById('listResult').innerHTML += pageInfo;
                }
            } catch (error) {
                showResult('listResult', { error: error.message }, true);
            }
        }

        // 2. 获取所有科目
        async function getAllSubjects() {
            try {
                const response = await fetch(`${API_BASE}/subject/all`);
                const data = await response.json();
                showResult('allResult', data);
            } catch (error) {
                showResult('allResult', { error: error.message }, true);
            }
        }

        // 3. 新增科目
        async function addSubject() {
            try {
                const name = document.getElementById('addName').value.trim();
                const gradeLevel = document.getElementById('addGrade').value;
                
                if (!name) {
                    alert('请输入科目名称');
                    return;
                }
                if (!gradeLevel) {
                    alert('请选择年级层次');
                    return;
                }

                const params = {
                    name: name,
                    gradeLevel: parseInt(gradeLevel),
                    sortOrder: parseInt(document.getElementById('addSort').value) || 0,
                    status: 1
                };
                
                const icon = document.getElementById('addIcon').value.trim();
                if (icon) params.icon = icon;

                const response = await fetch(`${API_BASE}/subject/add`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(params)
                });
                
                const data = await response.json();
                showResult('addResult', data);
                
                if (data.code === 200) {
                    // 清空表单
                    document.getElementById('addName').value = '';
                    document.getElementById('addGrade').value = '';
                    document.getElementById('addIcon').value = '';
                    document.getElementById('addSort').value = '0';
                }
            } catch (error) {
                showResult('addResult', { error: error.message }, true);
            }
        }

        // 4. 根据ID查询科目
        async function getSubjectById() {
            try {
                const id = document.getElementById('getById').value;
                if (!id) {
                    alert('请输入科目ID');
                    return;
                }

                const response = await fetch(`${API_BASE}/subject/${id}`);
                const data = await response.json();
                showResult('getByIdResult', data);
            } catch (error) {
                showResult('getByIdResult', { error: error.message }, true);
            }
        }

        // 5. 根据年级查询科目
        async function getSubjectsByGrade() {
            try {
                const gradeLevel = document.getElementById('gradeLevel').value;
                if (!gradeLevel) {
                    alert('请选择年级层次');
                    return;
                }

                const response = await fetch(`${API_BASE}/subject/byGrade/${gradeLevel}`);
                const data = await response.json();
                showResult('gradeResult', data);
            } catch (error) {
                showResult('gradeResult', { error: error.message }, true);
            }
        }

        // 6. 更新科目状态
        async function updateStatus() {
            try {
                const id = document.getElementById('statusId').value;
                const status = document.getElementById('statusValue').value;
                
                if (!id) {
                    alert('请输入科目ID');
                    return;
                }

                const params = new URLSearchParams();
                params.append('id', id);
                params.append('status', status);

                const response = await fetch(`${API_BASE}/subject/updateStatus`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    body: params
                });
                
                const data = await response.json();
                showResult('statusResult', data);
            } catch (error) {
                showResult('statusResult', { error: error.message }, true);
            }
        }

        // 7. 删除科目
        async function deleteSubject() {
            try {
                const id = document.getElementById('deleteId').value;
                if (!id) {
                    alert('请输入科目ID');
                    return;
                }

                if (!confirm('确定要删除这个科目吗？')) {
                    return;
                }

                const response = await fetch(`${API_BASE}/subject/delete/${id}`, {
                    method: 'POST'
                });
                
                const data = await response.json();
                showResult('deleteResult', data);
            } catch (error) {
                showResult('deleteResult', { error: error.message }, true);
            }
        }

        // 8. 上传科目图标
        async function uploadIcon() {
            try {
                const fileInput = document.getElementById('iconFile');
                const file = fileInput.files[0];

                if (!file) {
                    alert('请选择要上传的图片文件');
                    return;
                }

                const formData = new FormData();
                formData.append('file', file);

                const response = await fetch(`${API_BASE}/upload/subject-icon`, {
                    method: 'POST',
                    body: formData
                });

                const data = await response.json();
                showResult('uploadResult', data);

                if (data.code === 200) {
                    // 显示上传的图片
                    const imagePreview = `
                    <div style="margin-top: 10px; padding: 10px; background: #e8f5e8; border-radius: 4px;">
                        <strong>上传成功！图片预览：</strong><br>
                        <img src="${data.data}" style="max-width: 200px; max-height: 200px; border: 1px solid #ddd; border-radius: 4px; margin-top: 10px;">
                        <br><strong>图片URL：</strong> ${data.data}
                    </div>`;
                    document.getElementById('uploadResult').innerHTML += imagePreview;
                }
            } catch (error) {
                showResult('uploadResult', { error: error.message }, true);
            }
        }

        // 9. 批量删除科目
        async function batchDeleteSubjects() {
            try {
                const idsInput = document.getElementById('batchIds').value.trim();
                if (!idsInput) {
                    alert('请输入要删除的科目ID列表');
                    return;
                }

                const ids = idsInput.split(',').map(id => parseInt(id.trim())).filter(id => !isNaN(id));
                if (ids.length === 0) {
                    alert('请输入有效的科目ID');
                    return;
                }

                if (!confirm(`确定要删除这 ${ids.length} 个科目吗？\nID: ${ids.join(', ')}`)) {
                    return;
                }

                const response = await fetch(`${API_BASE}/subject/batchDelete`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(ids)
                });

                const data = await response.json();
                showResult('batchDeleteResult', data);

                if (data.code === 200) {
                    document.getElementById('batchIds').value = '';
                    // 刷新科目列表
                    getSubjectList();
                }
            } catch (error) {
                showResult('batchDeleteResult', { error: error.message }, true);
            }
        }

        // 页面加载完成后自动获取科目列表
        window.onload = function() {
            getSubjectList();
        };
    </script>
</body>
</html>
